<style lang="scss" scoped>
.rank_wrap {
    display: flex;
    flex-direction: column;
    .rank_item {
        padding: 10px 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .userName {
            margin: 0 16px;
            width: 50px;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }
        .rank_chart {
            flex: 1;
            height: 24px;
            .chart_inner {
                position: relative;
                height: 100%;
                text-align: right;
                padding: 0 10px;
                box-sizing: border-box;
                white-space: nowrap;
                cursor: pointer;
                span {
                    color: #fff;
                    font-size: 12px;
                    line-height: 24px;
                }
            }
        }
    }
}
</style>

<template>
    <div class="rank_wrap">
        <div class="rank_item" v-for="(item, index) in showList">
            <table-rank :rank="index" />
            <span class="userName">{{ item.name }}</span>
            <div class="rank_chart">
                <div
                    :style="{
                        width: item.width,
                        background: item.color,
                    }"
                    class="chart_inner"
                >
                    <span>{{ item.number }}元</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import tableRank from "@/components/tableRank.vue";
import { computed } from "vue";
const colors = ["#fc3e3d", "#fc794c", "#fd9c46", "#5191ef"];
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
});
const maxNumber = computed(() => {
    return Math.max(...props.list.map(v => v.realCost));
});
const showList = computed(() => {
    return props.list.map((val, index) => {
        return {
            number: (val.realCost || 0).toFixed(2),
            name: val.username,
            color: colors[index] || colors[3],
            width: calcuteRate(val.realCost),
        };
    });
});
const calcuteRate = (num) => {
    return (num / maxNumber.value) * 100 + "%";
};
</script>

